<div class="mdui-container">
    <div class="mdui-table-fluid mdui-shadow-0">
        <table class="mdui-table mdui-table-hoverable">
            <thead>
                <tr>
                    <th>数据库名</th>
                    <th>行数</th>
                    <th>占用空间</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>

<script>
    var $ = mdui.$;
    $(function () {
        function toSizeText(a) {
            if (0 === a) return "0B";
            var b = Math.floor(Math.log(a) / Math.log(1024));
            return [
                Number((a / Math.pow(1024, b)).toFixed(2)),
                "B KB MB GB TB PB EB ZB YB".split(" ")[b]
            ].join(' ');
        };

        $.ajax({
            url: '/admin/api/get_db_info',
            dataType: "json",
            success: function (res) {
                if (res.code == 200) {
                    var tbody = $('tbody')
                    $.each(res.data, function (i, v) {
                        tbody.append('<tr><td>' + v.name + '</td><td>' + v.rows + '</td><td>' + toSizeText(v.size) + '</td></tr>')
                    });
                    mdui.mutation();
                } else {
                    mdui.snackbar(res.msg)
                }
            },
            error: function (res) {
                reject('加载失败')
            }
        });
    });
</script>